<!--
 * @authors 沙洲 chenchenyixin@qq.com http://gitee.com/shazhou
 * @date    2019-12-26 10:27:20
-->

<template>
  <panel title='新手特权'>
  	<section class="content">
  		<div class="item border-right">
  			<h4>下载APP<span class="red">送888元礼包</span></h4>
  			<p class="gray">新手专享</p>
  			<img src="//img12.360buyimg.com/jrpmobile/jfs/t10384/155/1759179594/9776/185bd062/59e5f0ebNec4cf494.png?width=100&height=100" alt="">
  		</div>
  		<div class="item">
  			<ul>
  				<li class="border-bottom">
            <img src="//img12.360buyimg.com/jrpmobile/jfs/t4639/162/1782623297/60754/98ea03b4/58e60952N7fdb2b85.png?width=200&height=200" alt="">
            <h4 class="red">领128元新手礼包</h4>
            <p class="gray">立即开通</p>
          </li>
          <li>
            <img src="//img12.360buyimg.com/jrpmobile/jfs/t4804/179/657713323/5908/66dce262/58e6095fNd3dc3f39.png?width=100&height=100" alt="">
            <h4>打白条<span class="red">享免息</span></h4>
            <p class="gray">立即开通享豪礼</p>
          </li>
  			</ul>
  		</div>
  	</section>
  </panel>  
</template>

<script>
import panel from '../../../components/panel.vue'
export default {
  name: 'novice',
  data(){
	  return{

	  }
  },
  props:{
  
  },
  components:{
  	panel
  },
  created(){

  },
  mounted(){

  },
  methods:{

  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/mixins.styl'
.content
	list(flex,row)
	.item
		flex:1
		box-sizing:border-box
		height:144px
		&:first-child
			padding:16px 10px
			text-align:center
		h4
			font-size:14px
			font-weight:bold
			line-height:20px
		.red
			color:#f00
		.gray
			color:#999
			font-size:12px
		p
			margin-top:6px
		img
			width:66px
			height:66px
			margin:10px auto 10px auto
		ul
			// list(flex,column)
			// justify-content:center
			// align-items:center
			width:100%
			li
				// flex:1
				width:100%
				height:72px
				padding:16px 14px
				box-sizing:border-box
				img
					width:40px
					height:40px
					float:right
					

</style>


